<template>
	<view class="container">
		<hr class="chr"/>
		<div class="rowborder">
			<div style="display: flex;">
				<button size="mini" type="default" @click="navTo">新建</button>
				<picker mode="date" :value="query.ddate" @change="bindDateChange"  class="topborder">
					<text class="itemth">日期:</text><text class="inputborder">{{query.ddate}}</text>
				</picker>
			</div>
			<div class="billflex">
				<view class="itembillth">单号:</view>
				<uni-easyinput  placeholder="请输入单号" v-model="query.ccode" class="inputbill" ></uni-easyinput>
				<button size="mini" type="default" @click="findAll">查询</button>
			</div>
		</div>
		<hr class="chr"/>
		<view v-for="item,index in datas" v-bind:key="index">
			<navigator :url="'../qcincome/index?id='+item.id" class="navborder">
				<view style="color: #ff0000;float: right;margin: 20upx;">{{item.zjStatus}}</view>
				<view><text class="itemth">单号:</text><text class="itmemain">{{item.ccode}}</text></view>
				<view><text class="itemth">供应商名称:</text><text class="itmemain">{{item.cvenname}}</text></view>
				<view style="display: flex;">
					<view style="width: 300px;"><text class="itemth">编码:</text><text class="itmemain">{{item.cinvcode}}</text></view>
					<view><text class="itemth">产品:</text><text class="itmemain">{{item.cinvname}}</text></view>
				</view>
				<view style="display: flex;">
					<view style="width: 300px;"><text class="itemth">数量:</text><text class="itmemain">{{item.qty}}</text></view>
					<view ><text class="itemth">供应商名称:</text><text class="itmemain">{{item.cvenname}}</text></view>
				</view>
				<view style="display: flex;">
					<view style="width: 300px;"><text class="itemth">部门名称:</text><text class="itmemain">{{item.cdepname}}</text></view>
					<view><text class="itemth">方案名称:</text><text class="itmemain">{{item.projectName}}</text></view>
				</view>
				<view style="display: flex;">
					<view style="width: 300px;"><text class="itemth">创建人:</text><text class="itmemain">{{item.createBy}}</text></view>
					<view><text class="itemth">创建时间:</text><text class="itmemain">{{item.createTime}}</text></view>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
import selectBox from '../../components/select-box/select-box.vue'
	export default {
		components:{
			selectBox
		},
		created() {
			
			this.findAll();
			this.query.ddate = this.getNowFormatTime();
		},
		data() {
			return {
				datas:[],
				query:{
					pageIndex:1,
					pageSize:100,
					ddate:''
				}
			}
		},
		methods: {
			navTo(){
				uni.redirectTo({
					url: '/pages/qcincome/index'
				});
			},
			findAll(){
				let data = this.query
				data.sddate = this.query.ddate
				data.eddate = this.query.ddate
				this.$http.post(
					"quality/query",
					data
				).then(res=>{
					this.datas = res.data.data.page.content
				})
			},
			dateSelect(e){
				console.log(e)
			},
			bindDateChange(e){
				this.query.ddate = e.detail.value
				this.findAll()
			},
			getNowFormatTime() {
				let date = new Date();
				let seperator1 = "-";
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let strDate = date.getDate();
				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				let currentdate = year + seperator1 + month + seperator1 + strDate;
				return currentdate;
			}
		}
	}
</script>

<style>
	.container {
		font-size: 20px;
		background-color: #3884fd;
	}
	.chr{
		height:1upx;
		border:none;
		border-top:1upx solid #d2f1ff;
	}
	.unigriditem{
		text-align:center;
		text-justify: auto;
		margin: auto auto;
	}
	.itemth{
		padding: 1upx 10upx;
		font-size: 10rpx;
	
	}
	.itembillth{
		margin-top: 10upx;
		font-size: 10upx;
	}
	.itmemain{
		font-size: 15rpx;
		color: #2480a7;
	}
	.topborder{
		margin: 2rpx 20rpx;
	}
	.inputborder{
		background-color: #ffffff;
		border-color: #d2f1ff;
		background-color: #d2f1ff;
		padding: 3rpx 10rpx;
		border-width: 0.5rpx;
		border-style:solid;
		border-radius: 8rpx;
	}
	.rowborder{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 3rpx;
	}
	.billflex{
		display: flex;
		flex-direction: row;
		margin-right: 30rpx;
	}
	.navborder{
		background-color: #d2f1ff;
		padding: 1rpx;
		margin: 2rpx 10rpx;
		border-color: #eff8ff;
		border-width: 0.5rpx;
		border-style:solid;
		border-radius: 8rpx;
	}
	.inputbill{
		border-color: #eff8ff;
		border-width: 0.5rpx;
		border-style:solid;
		border-radius: 8rpx;
		width: 230rpx;
		margin-right: 5rpx;
		background-color: #d2f1ff;
	}
</style>
